<template>
    <div>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(item, index) in nums">
                {{ index }} => {{ item }}
            </li>
        </ul>

        <div v-for="(item, index) in objs">
            <div>{{ item.name }}</div>
            <div>{{ item.age }}</div>
        </div>

        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value, key, index) in obj">
                value={{ value }} key={{ key }} index={{ index }}
            </li>
        </ul>
        
        <!-- 遍历数字 -->
        <ul>
            <li v-for="(n, index) in num">
                {{ index }} => {{ n }}
            </li>
        </ul>
        
        <!-- 遍历字符串 -->
        <div>
            <div v-for="(char, index) in str">
                {{ index }} => {{ char }}
            </div>
        </div>
    </div>
</template>

<script setup>
    const nums = [11, 22, 33, 44]

    const objs = [
        { name: 'zhangsan', age: 12 },
        { name: 'lisi', age: 23 },
        { name: 'wangwu', age: 45}
    ]

    const obj = {
        name: 'Jack',
        age: 12,
        sn: '123321'
    }

    const num = 10

    const str = 'hello vue3'
</script>

<style scoped>

</style>